<template>
  <div class="teach-summary">
    <div class="class-info">
      <div class="info-container">
        <div class="class-info-header">本节课教学内容</div>
        <div class="class-info-content">
          <div class="content-item">
            <div class="content-item-label">上课时间:</div>
            <div class="content-item-value">{{data.startDate}}</div>
          </div>
          <div class="content-item">
            <div class="content-item-label" v-if="classData">重难点:</div>
             <el-input
              v-if="classData"
              class="difficult"
              type="textarea"
              :autosize='true'
              resize="none"
              v-model="classData.difficultPoint"
              :placeholder="'暂无重难点描述'"
              disabled="true"/>
            <!-- <div class="content-item-value" v-if="classData">{{classData.difficultPoint}}</div> -->
          </div>
          <div class="content-item">
            <div class="content-item-label">知识点:</div>
            <div class="content-item-value">{{knowledgePonit}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="class-student">
      <div class="teach-count">
        <span>教学统计:</span>
        <div class="teach-count-item">
          <span>学生人数</span>
          <span>{{studentList.length}}</span>
        </div>
        <div class="teach-count-item">
          <span>已评价学生</span>
          <span>{{filterAlreadyStudent}}</span>
        </div>
        <div class="teach-count-item">
          <span>进门考平均分</span>
          <span>{{!isNaN(parseFloat(filterAverage).toFixed(0)) ? parseFloat(filterAverage).toFixed(0): 0}}</span>
        </div>
        <div class="teach-count-item">
          <span>本节课错题总数</span>
          <span>{{wrongTopicCount}}</span>
        </div>
      </div>
      <el-table :data="studentList" v-loading="tableLoading">
        <el-table-column prop="studentName" label="学生姓名" fixed="left"></el-table-column>
        <el-table-column label="出勤情况" min-width="100px">
          <template #default="{ row }">
            <span>{{ {1:'提前到', 2:'准时',3:'迟到', 4:'缺勤'}[row.attendance] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="听课状态">
          <template #default="{ row }">
            <span>{{ {1:'优秀', 2:'良好',3:'一般'}[row.listenState] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop label="上节课作业" min-width="100px">
          <template #default="{ row }">
            <span>{{ {1:'完成', 2:'部分完成',3:'未完成'}[row.lastHomework] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop label="出门清">
          <template #default="{ row }">
            <span>{{ {1:'优秀', 2:'良好',3:'一般'}[row.outState] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="entranceScore" label="进门考"></el-table-column>
        <el-table-column prop="wrongTopicTotal" label="本节课错题" min-width="100px"></el-table-column>
        <el-table-column prop="lastHomeworkScore" label="上节课作业" min-width="100px"></el-table-column>
        <el-table-column prop="comment" label="学生表现" min-width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column prop label="状态" width="120px" fixed="right">
          <template #default="{ row }">
            <span
              @click="commentStudent(row)"
              class="comment"
              :class="row.status ? 'is_already' : 'fail_already'"
            >{{row.status ? '已评价':'未评价'}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <TestBasket :questionList="cartList" /> -->
    <el-dialog
      title="提示"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      v-model="commentVisible"
      width="80%"
      destroy-on-close
      @close="commentClosed"
    >
      <template #title>
        <div class="cus-title">
          <span>{{currentStudent.studentName}}-{{currentStudent.status ? '已评价':'未评价'}}</span>
          <div class="comment-list">
            <div
              v-for="item in commentList"
              :key="item.com"
              class="comment-item"
              :class="{'is_current': item.com === currentCom}"
              @click="currentCom = item.com"
            >{{item.label}}</div>
          </div>
        </div>
      </template>
      <!-- <component
        :is="currentCom"
        :commentDetail="currentStudent"
        :studentId="currentStudentId"
        :data="data"
        ref="commentCom"
      ></component>-->
      <contact
        v-show="currentCom === 'contact'"
        :commentDetail="currentStudent"
        :studentId="currentStudentId"
        ref="contactDom"
        :data="data"
      />
      <performance
        v-show="currentCom === 'performance'"
        :commentDetail="currentStudent"
        :studentId="currentStudentId"
        ref="commentCom"
        :data="data"
      />
      <wrongTopic
        v-show="currentCom === 'wrongTopic'"
        :commentDetail="currentStudent"
        :studentId="currentStudentId"
        :data="data"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="saveComment">确 定</el-button>
          <el-button @click="commentVisible = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import contact from './student-comment/contact.vue'
import performance from './student-comment/performance.vue'
import wrongTopic from './student-comment/wrong-topic.vue'
import TestBasket from '@/views/question/components/test-basket.vue'
import handoutStore from '@/views/handout/store/index'
import store from './../../store'
export default {
  components: { contact, performance, wrongTopic, TestBasket },
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  setup(props) {
    let tableLoading = ref(false)
    let prepareData = computed(() => store.state.prepareData)
    let classData: any = computed(() => store.state.classData)
    let filterAlreadyStudent: any = computed(() => {
      return studentList.value.filter((e: any) => e.status).length
    })
    let filterAverage: any = computed(() => {
      return (
        studentList.value.reduce(
          (sum, item: any) =>
            (sum += item.status === 1 ? item.entranceScore : 0),
          0
        ) / studentList.value.filter((e: any) => e.status === 1).length
      )
    })
    let filterWrongTopic: any = computed(() => {
      return studentList.value.reduce(
        (sum, item: any) => (sum += item.wrongTopicTotal || 0),
        0
      )
    })
    let wrongTopicCount = ref(0)
    let handoutInfo: any = computed(() => handoutStore.state.paperInfo)
    let knowledgePonit: any = computed(() => {
      return handoutInfo.value.content
        .filter((e) => e.type === 3)
        .map((e) => e.content)
        .join(',')
    })
    let tableRef = ref()
    let commentVisible = ref(false)
    let commentList = [
      { label: '练习评价', com: 'contact' },
      { label: '课堂表现评价', com: 'performance' },
      { label: '本节课错题', com: 'wrongTopic' },
    ]
    let currentCom = ref('contact')
    let cartList = ref([])
    let studentList = ref([])
    let currentStudentId = ref('')
    let commentCom = ref()
    let contactDom = ref()
    let getCartList = localStorage.getItem('cartListValue')
    let currentStudent = ref({})
    getCartList
      ? (cartList.value = JSON.parse(getCartList))
      : (cartList.value = [])
    const commentStudent = async (data) => {
      currentStudent.value = data
      commentVisible.value = true
      currentStudentId.value = data.studentId
    }
    const getStudentList = () => {
      tableLoading.value = true
      axios
        .post('/admin/lessonSummary/queryStudentSummary', {
          lessonId: prepareData.value.id,
          searchType: prepareData.value.type,
          lessonThirdId: props.data.thirdId,
        })
        .then((res: any) => {
         res.result && (studentList.value = res.json) && (tableLoading.value = false)
         !res.result && ElMessage.error(res.msg)
        })
    }
    getStudentList()
    const getWrongTopicNum = () => {
      axios
        .post('/admin/lessonSummaryDetails/queryWrongCount', {
          lessonId: props.data.type === 1 ? props.data.contractId : props.data.lessonId,
          groupId: 3,
          lessonThirdId: props.data.thirdId,
          correct: 0
        })
        .then((res: any) => {
          wrongTopicCount.value = res.json
        })
    }
    getWrongTopicNum()
    const commentClosed = () => {
      getStudentList()
      getWrongTopicNum()
    }
    const saveComment = () => {
      commentCom.value && commentCom.value.save().then(res => {
        contactDom.value && contactDom.value.saveOnlyScore();
        commentVisible.value = false;
        ElMessage.success('保存成功')
      })
    }
    return {
      commentStudent,
      commentVisible,
      commentList,
      currentCom,
      cartList,
      prepareData,
      tableRef,
      studentList,
      currentStudentId,
      commentCom,
      contactDom,
      saveComment,
      currentStudent,
      classData,
      getStudentList,
      filterAverage,
      filterAlreadyStudent,
      filterWrongTopic,
      handoutInfo,
      knowledgePonit,
      wrongTopicCount,
      commentClosed,
      tableLoading
    }
  },
}
</script>

<style scoped lang="scss">
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: #fff;
  border-color: #fff;
  color: #333;
  cursor: not-allowed;
}
.teach-summary {
  display: flex;
  .class-info {
    .info-container {
      width: 256px;
      border-radius: 4px;
      border: 1px solid #72b22a;
      height: auto;
    }
    .class-info-header {
      font-size: 16px;
      color: #ffffff;
      padding: 9px 0;
      text-align: center;
      background: #72b22a;
      border-radius: 4px 4px 0px 0px;
    }
    .class-info-content {
      padding: 15px 10px;
      .content-item {
        margin-bottom: 10px;
        .content-item-label {
          font-size: 14px;
          color: #333333;
          margin-bottom: 5px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
        }
        .content-item-value {
          font-size: 14px;
          color: #666666;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          margin-bottom: 5px;
        }
      }
    }
  }
  .class-student {
    width: calc(100% - 276px);
    margin-left: 20px;
    .teach-count {
      display: flex;
      width: 100%;
      padding: 12px 24px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #dee4f1;
      margin-bottom: 20px;
      justify-content: space-around;
      > span {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-top: 6px;
      }
      .teach-count-item {
        background-size: 100%;
        padding: 17px 20px;
        position: relative;
        background: #fff4df;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        :nth-child(1) {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #faad14;
        }
        :nth-child(2) {
          margin-top: 4px;
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        &::after {
          content: '';
          background: #faad14;
          height: 16px;
          width: 8px;
          position: absolute;
          top: -8px;
          left: 22px;
          border-radius: 4px;
        }
        &::before {
          border-radius: 4px;
          content: '';
          background: #faad14;
          height: 16px;
          width: 8px;
          position: absolute;
          top: -8px;
          right: 22px;
        }
      }
    }
    .comment {
      background: #f2f2f2;
      border-radius: 3px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      position: relative;
      cursor: pointer;
      padding: 5px 13px 5px 21px;
      &::after {
        content: '';
        position: absolute;
        height: 4px;
        width: 4px;
        border-radius: 50%;
        left: 13px;
        top: calc(50% - 2px);
      }
    }
    .is_already {
      color: #74c874;
      &::after {
        background: #74c874;
      }
    }
    .fail_already {
      color: #fc514f;
      &::after {
        background: #fc514f;
      }
    }
  }
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #ebf0fc;
    padding: 14px 24px;
    .el-dialog__headerbtn {
      position: absolute;
      top: 24px;
      right: 20px;
    }
  }
  :deep(.el-dialog__footer) {
    border-top: 1px solid #ebf0fc;
  }
  :deep(.el-dialog__body) {
    padding: 6px 20px 20px 20px;
  }
  .cus-title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    > span {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      position: absolute;
      left: 20px;
      top: 8px;
    }
    .comment-list {
      padding: 2px;
      background: #ffffff;
      border-radius: 2px;
      background: #f0f2f5;
      display: flex;
      .comment-item {
        padding: 9px 17px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #303133;
        background: #f0f2f5;
        border-radius: 2px;
        cursor: pointer;
      }
      .is_current {
        background: #ffffff;
        color: #72b22a;
      }
    }
  }
}
</style>
